<template>
    <div>
        <nav>
            <div class="logo">
                <img src="../../assets/images/logo.png" alt="logo" />
            </div>
            <div class="router">
                <el-tabs v-model="useTab.tab" @tab-click="handleClick">
                    <el-tab-pane label="首页" name="Home"></el-tab-pane>
                    <el-tab-pane label="组装" name="Assembly"></el-tab-pane>
                    <el-tab-pane label="教程" name="Tutorial"></el-tab-pane>
                    <el-tab-pane label="交流" name="Chat"></el-tab-pane>
                </el-tabs>

            </div>
            <div class="setting">
                <div class="fn">
                    <el-space direction="horizontal" alignment="start" :size="30">
                        <el-button @click="changeTheme" size="large" link>
                            <Moon v-if="isDark" style="width: 2em; height: 2em" />
                            <Sunny v-else style="width: 2em; height: 2em" />
                        </el-button>

                        <el-popover :width="300" trigger="click">
                            <template #reference>
                                <el-button size="large" link>
                                    <Setting style="width: 2em; height: 2em" />
                                </el-button>
                            </template>

                            <template #default>

                                <el-space wrap :size="30">
                                    <div v-for="(item, index) in color" :key="index"
                                        :style="{ backgroundColor: item.value }" class="color"
                                        @click="changeColor(item.color)"></div>
                                </el-space>

                            </template>
                        </el-popover>

                        <el-popover :width="300" trigger="click">
                            <template #reference>
                                <el-badge value="new" class="item">
                                    <el-button size="large" link>
                                        <Bell style="width: 2em; height: 2em" />
                                    </el-button>
                                </el-badge>

                            </template>

                            <template #default>
                                <div class="timeline">
                                    <p style="font-weight: 600; margin-bottom: 10px">更新日志</p>
                                    <el-timeline>
                                        <el-timeline-item v-for="(activity, index) in activities" :key="index"
                                            :color="activity.color" :timestamp="formatTimestamp(activity.time)">
                                            {{ activity.content }}
                                        </el-timeline-item>
                                    </el-timeline>
                                </div>
                            </template>
                        </el-popover>

                        <el-button size="large" link @click="getFeedback">
                            <Service style="width: 2em; height: 2em" />
                        </el-button>

                        <el-button @click="OpenAI" size="large" link>
                            <SvgIcon name="ai" width="2em" height="2em"></SvgIcon>
                        </el-button>
                    </el-space>
                </div>
                <div v-if="!useTab.loginStatus">
                    <el-button @click="LoginIn" size="large" style="font-weight: 600">Login in</el-button>
                </div>
                <div v-else class="user" @click="toPage">
                    <el-badge is-dot class="item">
                        <el-avatar :src="useTab.avatar || ''" />
                    </el-badge>

                    <p>{{ useTab.username }}</p>
                </div>

            </div>
        </nav>
    </div>

    <el-dialog v-model="feedback" title="联系我们" width="1000" style="height: 550px;">
        <div class="aid">
            <div class="content">
                <el-space wrap :size="30">
                    <el-card v-for="(item, index) in aidList" :key="index" style="width: 450px">
                        <div style="display: flex; align-items: center;">
                            <el-avatar :size="30" :src="item.avatar" />
                            <span style="margin-left: 10px; font-weight: 600">{{ item.username }}</span>
                            <span style="margin-left: 10px; font-size: 12px; font-weight: bold;">{{ formatTimestamp(item.time) }}</span>
                            <el-tag v-if="item.status === 0" size="small" style="margin-left: 20px;" type="primary">处理中</el-tag>
                            <el-tag v-if="item.status === 1" size="small" style="margin-left: 20px;" type="success">处理完成</el-tag>
                            <el-tag v-if="item.status === 2" size="small" style="margin-left: 20px;" type="warning">驳回</el-tag>
                        </div>
                        <p>
                            {{ item.content }}
                        </p>
                    </el-card>
                </el-space>
            </div>
            <div class="input">
                <el-input v-model="aidContent" placeholder="提出你的看法" />
                <el-button  @click="postHelpInfo" style="margin-left: 10px;" type="primary">提交</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { Sunny, Moon, Setting } from "@element-plus/icons-vue";
import { useDark, useToggle } from "@vueuse/core";
import { useTabStore } from "@/store/useTabStore";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { Bell } from '@element-plus/icons-vue'
import { getLog } from '@/server/home/http'
import { formatTimestamp } from '@/utils/time'
import SvgIcon from '@/components/Icons/index.vue';
import { nextTick } from "process";
import { postHelp, getHelp } from "@/server/home/http";
const route = useRoute();
const router = useRouter();
const useTab = useTabStore()
const activities = ref([])
const feedback = ref(false)

const aidContent = ref('')

const aidList = ref([

])


//上传帮助信息
const postHelpInfo = () => {
    let data = {
        userId: useTab.userId,
        time: new Date().getTime(),
        content: aidContent.value,
        username: useTab.username,
        avatar: useTab.avatar,
        status: 0
    }
    postHelp(data).then((res) => {
        if (res.code == 200) {
            aidContent.value = ''
            getHelpInfo()
        }
    })
}

const getHelpInfo = () => {
    getHelp().then((res) => {
        if (res.code == 200) {
            aidList.value = res.data
        }
    })
}


const color = [
    {
        color: '',
        value: ''
    },
    {
        color: 'red_color',
        value: '#f5222d'
    },
    {
        color: 'green_color',
        value: '#52c41a'
    },
    {
        color: 'blue_color',
        value: '#1890ff'
    },
    {
        color: 'yellow_color',
        value: '#faad14'
    },
    {
        color: 'purple_color',
        value: '#722ed1'
    },
    {
        color: 'cyan_color',
        value: '#13c2c2'
    },
    {
        color: 'geekblue_color',
        value: '#2f54eb'
    },
    {
        color: 'magenta_color',
        value: '#eb2f96'
    },
    {
        color: 'volcano_color',
        value: '#fa541c'
    },
    {
        color: 'orange_color',
        value: '#fa8c16'
    },
    {
        color: 'gold_color',
        value: '#faad14'
    },
    {
        color: 'lime_color',
        value: '#a0d911'
    },
]


onMounted(() => {
    useTab.setTab(route.name as string);
    getLog().then((res) => {
        activities.value = res.data
    })
    getHelpInfo()
})

const toPage = () => {
    router.push({ name: "User", query: { id: useTab.userId } });
}

const getFeedback = () => {
    feedback.value = true
}


const OpenAI = () => {
    //如果没有登录，先登录
    if (!useTab.loginStatus) {
        router.push({ name: "Login" });
        return
    }
    router.push({ name: "AI", query: { id: useTab.userId } });
}


const LoginIn = () => {
    router.push({ name: "Login" });
}


const isDark = useDark();
const toggleDark = useToggle(isDark);
const changeTheme = () => {
    toggleDark()
    nextTick(() => {
        const theme = localStorage.getItem('vueuse-color-scheme')
        useTab.setTheme(theme as string)
    })
}




const handleClick = (tab: TabsPaneContext) => {
    // console.log(tab.props.name);
    useTab.setTab(tab.props.name);
    router.push({ name: tab.props.name });
}

const changeColor = (color) => {
    //清除所有的class
    document.body.className = '';
    document.body.classList.add(`${color}`);
}

</script>

<style scoped lang="scss">
.color {
    width: 20px;
    height: 20px;
    background-color: rgb(12, 67, 231);
    border-radius: 50%;
    cursor: pointer;
}

nav {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 30px;

    .logo {
        flex: 1;

        img {
            width: 20%;
            cursor: pointer;
        }
    }

    .router {
        flex: 2;
    }

    .setting {
        flex: 1.5;
        display: flex;
        justify-content: space-between;

        .fn {
            display: flex;
        }

        .user {
            display: flex;
            align-items: center;
            cursor: pointer;

            p {
                margin: 0 10px;
                font-weight: bold;
            }

        }
    }
}

.aid {
    display: flex;
    min-height: 470px;
    flex-direction: column;
    justify-content: space-between;

    .content {
        height: 400px;
        overflow-y: auto;

        p {
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 1px;
            line-height: 2;
        }
    }


    .input {

        align-items: center;
        display: flex;
    }
}


::v-deep .el-tabs__nav-wrap::after {
    display: none;
}

::v-deep .el-tabs__active-bar {
    height: 0;
}

::v-deep .el-tabs__header {
    margin: 0;

}

::v-deep .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
}

::v-deep .el-tabs__item {
    padding: 0 50px;
    font-size: medium;
    font-weight: 700;
}
</style>
